<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>修改优惠券</title>
	<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
	<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
	<body>
		<div class="layui-container">
			<form class="layui-form">
				<div class="layui-form-item">
					<input type="hidden" name="id" th:value="${c.id}">
					<input th:value="${c.exchangeCode}" class="layui-input"  type="hidden" name="name" style="width: 250px;" autocomplete="off" lay-verify="required"/>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">优惠券名称</label>
					<div class="layui-input-block">
						<input  class="layui-input"  type="text" name="name" style="width: 250px;" th:value="${c.name}"/>
					</div>	
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">介绍</label>
					<div class="layui-input-block">
						<input  class="layui-input"  type="text" name="introduce" style="width: 350px;" th:value="${c.introduce}"/>
					</div>	
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">标签</label>
					<div class="layui-input-block">
						<input  class="layui-input"  type="text" name="label" style="width: 250px;" th:value="${c.label}"/>
					</div>	
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">最低消费</label>
					<div class="layui-input-block">
						<div class="layui-inline">
							<input  class="layui-input"  type="text" name="minimumConsumption" style="width: 250px;" th:value="${c.minimumConsumption}"/>
						</div>
						 <div class="layui-inline" style="margin-left: -10px;">
						 	<span>
						 		<input class="layui-input" readonly value="元" style="width: 40px; margin-left: -10px; background-color: #EEEEEE;" />
						 	</span>
						 </div>
					</div>	
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">满减金额</label>
					<div class="layui-input-block">
						<div class="layui-inline">
								<input  class="layui-input"  type="text" name="fullMinus" style="width: 250px;" th:value="${c.fullMinus}"/>
						</div>
						<div class="layui-inline" style="margin-left: -10px;">
						 	<span>
						 		<input class="layui-input" readonly value="元" style="width: 40px; margin-left: -10px; background-color: #EEEEEE;" />
						 	</span>
						 </div>
					</div>	
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">每人限领</label>
					<div class="layui-input-block">
						<div class="layui-inline">
								<input  class="layui-input"  type="text" name="lim" style="width: 250px;" th:value="${c.lim}"/>
						</div>
						<div class="layui-inline" style="margin-left: -10px;">
						 	<span>
						 		<input class="layui-input" readonly value="张" style="width: 40px; margin-left: -10px; background-color: #EEEEEE;" />
						 	</span>
						 </div>
					</div>	
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分发类型</label>
					<div class="layui-input-block" style="width: 150px;">
						<select name="type">
							<option value=""></option>
							<option value="0" th:selected="${c.type == '0'}">注册领券</option>
							<option value="1" th:selected="${c.type == '1'}">通用领券</option>
							<option value="2" th:selected="${c.type == '2'}">兑换码</option>
						</select>
					</div>	
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">优惠券数量</label>
					<div class="layui-inline">
						<input  class="layui-input"  type="text" name="number" style="width: 250px;" th:value="${c.number}"/>
					</div>
					<div class="layui-inline" style="margin-left: -10px;">
						<span>
						 	<input class="layui-input" readonly value="张" style="width: 40px; margin-left: -10px; background-color: #EEEEEE;" />
						</span>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">有效期</label>
					<div class="layui-inline">
						<input type="radio" name="timeType" id="TimeTypeRadio0" value="0"  title="领券相对天数" lay-filter="timeType"th:checked="${c.timeType == 0}" >
						<input type="radio" name="timeType" id="TimeTypeRadio2" value="1"  title="指定绝对时间" lay-filter="timeType" th:checked="${c.timeType == 1}">
					</div>

					<div class="layui-input-block" id="timeType0" style="display: none">
						<div class="layui-inline">
							<input  class="layui-input"  type="text" name="dayRange" style="width: 200px;" th:value="${c.dayRange}" />
						</div>
						<div class="layui-inline" style="margin-left: -10px;">
						 	<span>
						 		<input class="layui-input" readonly value="天" style="width: 40px; margin-left: -10px; background-color: #EEEEEE;" />
						 	</span>
						</div>
					</div>
					<div class="layui-input-block" id="timeType1" style="display: none">
						<div class="layui-input-inline" style="width: 150px;">
							<input th:value="${sTime}" type="text" name="startTime" id="date0" placeholder="🕛选择日期" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline" style="width: 150px;">
							<input th:value="${eTime}" type="text" name="endTime" id="date1" placeholder="🕛选择日期" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">使用范围</label>
					<div class="layui-inline">
						<input type="hidden" th:value="${c.useRange}" id="useRange">
						<input type="radio" name="useRange" value="全场通用" title="全场通用" lay-filter="appointAll" th:checked="${c.useRange=='全场通用'}">
						<input type="radio" name="useRange" value="指定分类" title="指定分类" lay-filter="appointSort" th:checked="${c.useRange=='指定分类'}">
						<input type="radio" name="useRange" value="指定商品" title="指定商品" lay-filter="appointCommodity" th:checked="${c.useRange=='指定商品'}">
					</div>
					<div class="layui-input-block" id="appointSort" style="display: none;width: 300px">
						<select>
							<option value=""></option>
						</select>
						<div class="layui-inline">
							<a class="layui-btn layui-btn">选择</a>
						</div>
					</div>
					<div class="layui-input-block" id="appointCommodity" style="display: none;width: 300px">
						<div class="layui-inline">
							<select>
								<option value=""></option>
							</select>
						</div>
						<div class="layui-inline">
							<a  class="layui-btn"  id="addCommodityBtn">选择</a>
						</div>
					</div>
				</div>
				<div class="layui-input-block" id="CommodityTable" style="display: none">
					<input type="hidden" id="commodityListIds" th:value="${c.commodityListIds}">
					<table id="CommodityList" class="layui-table" lay-filter="CommodityList"></table>
				</div>

				<div class="layui-form-item">
					<a class="layui-btn" lay-submit="" id="submitBtn" lay-filter="submitBtn" style="display: none;">提交</a>
				</div>
				
			</form>
		</div>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	<script>
		var $,form,table,CommodityData=[];
		layui.use(['form','jquery','table','layer','laydate'],function () {
			varlayer = layui.layer,laydate = layui.laydate;
			$ = layui.jquery;
			form = layui.form;
			table = layui.table;

			getCommodityList();//加载商品列表
			getCommodity();
			laydate.render({
				elem: '#date0',
			});
			laydate.render({
				elem: '#date1',
			});



			$('#addCommodityBtn').on('click',function () {
				var id = $('#appointCommodity select').val();//获取选中的商品Id
				var name = $('#appointCommodity select option:selected').text();//获取选中的商品名
				var str = {"id":id,"name":name};
				if (uniqueArray(str,CommodityData,"id")){
					CommodityData.push(str);//将选中的商品添加到表数据中
				}
				//表重载
				table.reload('CommodityList');
			});
			form.on('submit(submitBtn)',function (data) {
				var formData = data.field;
				if (formData.useRange == '全场通用'){
					commit(formData);
				}else if (formData.useRange == '指定分类'){
					// TODO　指定分类：从分类表中获取分类Id
					layer.msg("暂时无法提交指定分类，谢谢合作");
				}else if (formData.useRange == '指定商品'){
					// TODO　指定商品：从商品表中获取全部商品Id，一起传回后端
					var commodityList = new Array();
					for (var i = 0;i < CommodityData.length; i++){
						var id =  CommodityData[i]["id"];
						commodityList.push(id);
					}
					formData.commodityList = commodityList;
					console.log(formData);
					commit(formData)
				}
			})

			//单选框监听
			form.on('radio(timeType)',function (data) {
				if (data.value == 0){
					$('#timeType0').show();
					$('#timeType1').hide();
				}else if (data.value == 1){
					$('#timeType0').hide();
					$('#timeType1').show();
				}
			})
			form.on('radio(appointAll)',function (data) {
				$('#appointSort').hide();
				$('#appointCommodity').hide();
				$('#CommodityTable').hide();
			})
			form.on('radio(appointSort)',function (data) {
				$('#appointSort').show();
				$('#appointCommodity').hide();
				$('#CommodityTable').hide();
			})
			form.on('radio(appointCommodity)',function (data) {
				$('#appointSort').hide();
				$('#appointCommodity').show();
				$('#CommodityTable').show();
			})

			table.render({
				elem:'#CommodityList',
				width:450,
				page:true,
				cols:[
					[
						{type:'numbers',sort:true},
						{field:'id',title:'商品Id',align: "center"},
						{field:'name',title:'商品名称',align: "center"},
						,{fixed: 'right', title:'操作', toolbar: '#barDemo',align: "center"}
					]
				],
				data: CommodityData
			})
			function getCommodityList(){
				var str = '';
				$.ajax({
					type:'post',
					url:'/system/cc/findCommodityList',
					dataType: 'json',
					success:function (result) {
						$.each(result,function (i,o) {
							str = '<option value="'+o.id+'">'+o.name+'</option>';
							$('#appointCommodity select').append(str);

						})
						form.render('select');//指定表单刷新
					}
				})
			}
			//表内工具
			table.on('tool(CommodityList)',function (obj) {
				var event = obj.event;
				var id = obj.data.id;
				if (event = 'del'){
					for (var i = 0;i < CommodityData.length;i++){
						if (id == CommodityData[i]["id"]){
							CommodityData.splice(i,1);
						}
					}
				}
				//表重载
				table.reload('CommodityList');
			})

		})

		function commit(formdata) {
			$.ajax({
				type:'post',
				url:'/system/cc/add',
				data: formdata,
				dataType:'json',
				traditional:true,//可以让 ajax 传输数组或对象
				success:function (result) {
					layer.msg(result.msg);
					if(result.is){
						let index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);//关闭父页面窗口
					}
				}
			})//提交数据到后台
		}

		function submitBtn() {
			$('#submitBtn').click();
		}

		/**
		 * 向后端请求商品列表
		 * */
		function getCommodity() {
			var useRange = $('#useRange').val();
			if (useRange == "指定商品"){
				var ids =  $('#commodityListIds').val();
				$.ajax({
					type:'post',
					url:'/system/cc/getCommodity',
					data: {
						ids:ids
					},
					dataType:'json',
					traditional:true,//可以让 ajax 传输数组或对象
					success:function (result) {
						console.log(result);
						for (var i = 0;i<result.length;i++){
							var str = {"id":result[i].id,"name":result[i].name};
							CommodityData.push(str);
						}
						//表重载
						table.reload('CommodityList');
					}
				})
			}
		}


		/**
		 * 判断数组中是否存在相同的Json对象
		 * */
		function uniqueArray(Json,JsonArray, key){
			for (var i = 0;i<JsonArray.length;i++){
				if (JsonArray[i][key] == Json[key]){
					return false;
				}
			}
			return true;
		}
	</script>
	</body>
</html>
